<!--
 * @Author: TT-hzy
 * @Date: 2024-07-31 15:15:13
 * @LastEditors: TT-hzy
 * @LastEditTime: 2024-08-01 16:16:09
-->

<template>
  <div class="page-mobile">
    <div class="home-containeer-mobile column-center">
      <img
        class="mr-8 h-42"
        src="https://lf-cdn-tos.bytescm.com/obj/static/luna/home/1.0.0.184/assets/logo-0921b993.svg"
        alt="汽水音乐"
      />
      <span class="slogn-mobile">抖音官方出品音乐APP</span>
      <div class="preview-mobile">
        <img
          src="https://p26-luna.douyinpic.com/tos-cn-i-b829550vbb/home/6b1a9cff97a3937c9e0aa991841ff53e.png~tplv-b829550vbb-image.image"
          alt="phone"
          class="image"
        />
        <img
          src="https://p26-luna.douyinpic.com/tos-cn-i-b829550vbb/home/afb834f8ce750654deddf2a51ed9ac06.png~tplv-b829550vbb-image.image"
          alt="phone"
          class="image ip"
        />
      </div>
      <div class="down-mobile column-center mt-60">点击下载</div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.page-mobile {
  width: 100vw;
  height: 100vh;

  padding: 32px 40px;

  .home-containeer-mobile {
    width: 100%;
    flex: 1;
  }

  .slogn-mobile {
    color: #ffffff80;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 6px;
    margin-top: 16px;
    margin-bottom: 30px;
  }

  .preview-mobile {
    z-index: 1;
    position: relative;
    .image {
      width: 70%;
    }

    .ip {
      position: absolute;
      right: 0;
      top: 32px;
      z-index: 2;
    }
  }

  .down-mobile {
    height: 48px;
    width: 80%;
    background: #fff;
    border-radius: 9px;
    color: #121212;
    line-height: 175%;
  }
}
</style>
